<template>
    <div id="my-steps" class="my-steps" :class="disabled?'notclickn': ''">
      <div class="my-step__item" :class="{'active': index == (stepActive - 1)}" :style="{'flex-basis': 100/stepList.length + '%'}" v-for="(step, index) of stepList" :key="step">
        <div class="my-step__icon"><span>{{index + 1}}</span></div>
        <p class="my-step__title" v-on:click="clickStep(index)">{{step}}</p>
        <div class="my-step__arrow" v-if="index < stepList.length - 1">
            <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
    
</template>

<script>
export default {
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        stepList: {
            type: Array,
            required: true
        },
        stepActive: {
            type: Number | String,
            required: true,
        }
    },
    data() {
        return {
           myStep: null,
           isAdd: false
        }
    },
    mounted() {
    this.init()
    },

    watch: {
        stepActive(newValue) {
            this.stepActive = newValue
        },
        'disabled': {
            immediate: true,
            handler(newValue) {
                if (newValue == true) {
                    this.disabled = true
                }else {
                    this.disabled = false
                }
                //    document.getElementsByClassName('my-steps')[0].removeClass('notclickn')
                // }
                // this.myEditor.enable();
            }
        }
    },
    methods: {
            init() {
              this.myStep = document.getElementsByClassName("my-steps")[0]  
              this.$emit('init', true);
            //   this.disabled = !this.isAdd
            },
            clickStep(index) {
              let stepActive = Number(index + 1)
              this.$emit('change',stepActive)
            }
    },
    
  
}
</script>

<style lang="scss" scoped>
.notclickn {
    pointer-events: none;
}
.my-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909399;
    
    .my-step__item {
        flex: 1;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .my-step__icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid #909399;
            text-align: center;
            display: inline-block;
            margin-right: 15px;

            > span {
                font-size: 14px;
                line-height: 20px;
            }
        }

        &.active {
            color: #303133;

            .my-step__icon {
                border-color: #43425d;
                background-color: #43425d;

                > span {
                    color: white;
                }
            }

            .my-step__title {
                font-weight: 700;
            }
        }
    }

    .my-step__arrow {
        color: #909399;
        font-size: 28px;
        position: absolute;
        right: -14px;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>